/*
 * Configurações Gerais
 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #f0f0f0; /* Texto claro */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.btn {
    padding: 9px 22px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    transition: background-color 0.3s;
    text-transform: uppercase;
    font-size: 0.9rem;
    /* Remover 'width: 10%;' se o botão for de navegação, para que o tamanho seja automático. */
    /* Caso contrário, ele fica pequeno demais */
    /* width: 10%; */ 
}

.btn-primary { 
    background-color: #3131d2;
    color: rgb(9, 7, 7);
}
.btn-primary:hover {
    background-color: #0f0c0d;
}

.btn-secondary { /* Botão de Pré-Venda na Hero Section */
    background-color: #0d0515;
    color: white;
    padding: 12px 25px;
    margin-right: 15px;
}
.btn-secondary:hover {
    background-color: #451fdf;
}

.btn-documentation { /* Botão secundário na Hero Section */
    background-color: transparent;
    border: 2px solid #451fdf;
    color: #451fdf;
    padding: 10px 23px;
}
.btn-documentation:hover {
    background-color: #451fdf;
    color: white;
}

.btn-card {
    background-color: #2c2c2c;
    color: #f0f0f0;
    padding: 8px 15px;
    display: inline-block;
    margin-top: 15px;
}
.btn-card:hover {
    background-color: #f90542;
}

/*
 * 1. MENU DE NAVEGAÇÃO
 */
.navbar {
    background-color: #201919;
    padding: 12px 9;
    border-bottom: 3px solid #fcfcfc; /* Detalhe em cor vibrante */
}

.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.navbar li {
    margin-left: 25px;
}
.navbar a {
    color: #cccccc;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s;
}
.navbar a:hover {
    color: #0c1ff4;
}

/*
 * 2. HERO SECTION
 * ATENÇÃO: Se você estiver usando a estrutura de LISTA e não de TABELA,
 * use .hero. Se estiver usando a estrutura de TABELA, use .hero-detail.
 * Mantive ambos aqui com as correções.
 */
/*
 * 2. HERO SECTION - Aprimoramento Visual
 */
.hero {
    /* Mantenha o background e o box-shadow para o efeito de transparência */
    background: url('ark.png') no-repeat center center; 
    background-size: cover;
    padding: 120px 0; /* Aumenta o padding para dar mais ar ao topo e base */
    text-align: center;
    position: relative;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.6); 
    /* Garante que o conteúdo tenha espaço extra acima e abaixo */
}


.hero .container{
    flex-direction: column;
    /* Adicionado flex-grow para garantir que o container ocupe o espaço */
    flex-grow: 1; 
    position: relative;
    z-index: 2; 
}

/* TÍTULO PRINCIPAL (h1) - Mais Forte e Legível */
.hero h1 {
    font-size: 3.5rem; /* Aumentado */
    margin-bottom: 5px;
    /* CORREÇÃO: BRANCO PURO para máximo impacto e legibilidade */
    color: white; 
    text-transform: uppercase;
    /* Sombra de texto mais forte para o efeito dramático sobre o fundo */
    text-shadow: 0 0 10px rgba(0, 0, 0, 1), 0 0 5px rgba(51, 85, 255, 0.5); 
}

/* SUBTÍTULO (h2) - Mensagem Curta */
.hero h2 {
    font-size: 1.6rem;
    /* CORREÇÃO: Usar o acento secundário (azul) para harmonizar a linha */
    color: var(--secondary-accent); 
    font-weight: 400; /* Média */
    margin-bottom: 20px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

/* PARÁGRAFO DE DETALHES (p) */
.hero p {
    max-width: 750px; /* Levemente mais largo */
    font-size: 1.15rem; /* Levemente maior */
    line-height: 1.5;
    margin: 0 auto 50px; /* Aumenta a margem para separar os botões dos stats */
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}

/* BOTÕES - (Mantidos, mas garantindo que o roxo brilhe) */
.btn-secondary { /* Botão Pré-Venda */
    background-color: black; 
    box-shadow: 0 0 20px rgba(13, 13, 227, 0.7); /* Brilho forte */
}

/* ESTATÍSTICAS (Stats) - Destaque nos números */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 70px; /* Aumenta o espaço entre os números */
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    width: 80%; /* Alinha a barra de stats */
    max-width: 700px;
}

.hero-stats div h3 {
    font-size: 3rem; /* Números maiores */
    color: var(--primary-accent); /* Cor de destaque roxa */
    margin: 0;
    text-shadow: 0 0 10px rgba(153, 51, 255, 0.9); /* Brilho nos números */
}
.hero-stats div p {
    font-size: 0.95rem;
    margin: 0;
    color: #cccccc;
    text-transform: uppercase;
    font-weight: bold;
}

/* Opcional: Para o texto ser ainda mais legível sobre o fundo escuro */
.product-info h2 {
    /* ... (outros estilos) ... */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}


.necessities-cards {
    padding: 80px 0;
    background-color: #1a1a1a; /* Fundo escuro para a seção */
    text-align: center;
}

.necessities-cards .container {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;
    gap: 20px;
    align-items: stretch;
}

.necessities-cards h2 {
    width: 100%;
    margin-bottom: 40px;
    font-size: 2rem;
    color: var(--light-text);
}

/*
 * 3. SEÇÃO DE CARDS (Necessidades)
 */
/* ... (Necessities-cards e container) ... */


.card {
    width: 30%;
    min-width: 280px; 
    height: 420px; /* Aumentamos a altura total do card */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
    background-color: #2c2c2c; /* Fundo sólido para o rodapé */
    display: flex; /* Usamos flexbox para o layout interno */
    flex-direction: column;
    text-align: left;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* 1. WRAPPER DA IMAGEM (Parte superior) */
.card-image-wrapper {
    flex-shrink: 0; /* Não permite que a imagem encolha */
    height: 60%; /* Ocupa 60% da altura do card */
    width: 100%;
    overflow: hidden;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
    display: block;
    transition: transform 0.3s;
}

.card:hover .card-image-wrapper img {
    /* Efeito sutil de zoom ao passar o mouse */
    transform: scale(1.05);
}

/* 2. INFORMAÇÕES DO CARD (Meio) */
.card-info {
    flex-grow: 1; /* Ocupa o espaço restante antes do footer */
    padding: 10px 15px;
    background-color: #2c2c2c; /* Fundo escuro sólido */
    color: var(--light-text);
}

.card-tag {
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--secondary-accent);
    margin-bottom: 2px;
}

.card-info h3 {
    margin: 0 0 5px 0;
    font-size: 1.4rem;
}

.price-old {
    text-decoration: line-through;
    color: #999999;
    font-size: 0.8rem;
    margin: 0;
}

.price-new {
    color: var(--primary-accent); /* Preço em destaque */
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
}

/* 3. FOOTER DO CARD (Rodapé com o botão) */
.card-footer {
    flex-shrink: 0; /* Não permite que o footer encolha */
    height: 50px;
    width: 100%;
    background-color: #333333; /* Fundo ligeiramente mais claro */
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-card-cta {
    /* Estilo do botão dentro do footer */
    background-color: transparent;
    color: green;
    padding: 10px 20px;
    border-radius: 0;
    font-weight: bold;
    font-size: 0.9rem;
    width: 100%;
    text-align: center;
}

.btn-card-cta:hover {
    background-color: var(--primary-accent);
}

/* Removendo as regras de background-image dos cards */
.card-game {
    /* Opcional: manter borda e sombra para destaque */
    border: 3px solid var(--primary-accent); 
    box-shadow: 0 0 20px rgba(85, 51, 255, 0.7); 
}

.content-section {
    /* Adiciona padding superior e inferior para criar um grande respiro visual */
    padding: 80px 0; 
    
    /* Alterna a cor de fundo entre as seções para melhor distinção */
    background-color: var(--dark-bg); /* Fundo muito escuro (ex: #121212) */
}


footer {
    background-color: #0d0d0d;
    color: #888888;
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
}
footer p {
    margin: 5px 0;
}

/* REGRA DE IMAGEM REMOVIDA/IGNORADA */
/* Removi a regra 'img { height: 50px; }' que afeta todas as imagens, 
   pois ela não era a causa do problema de transparência e poderia afetar o layout. */